<template>
  <div class="edit-box">
    <Form :model="rowData" :rules="rowDataFules" :label-width="60" >
      <Row :gutter="10">
        <Divider orientation="left" dashed size="small" style="font-size: 12px;margin-top: 0">联系信息</Divider>
        <Col span="6">
          <FormItem label="性别" prop="kz_gender">
            <Select v-model="rowData.kz_gender" clearable placeholder="性别">
              <Option value="男">男</Option>
              <Option value="女">女</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="姓名" prop="kz_name">
            <Input v-model="rowData.kz_name" placeholder="姓名" maxlength="4"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="手机">
            <Input v-model="rowData.kz_phone" placeholder="手机"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="微信">
            <Input v-model="rowData.wx_id" placeholder="微信">
              <!-- <Select v-model="select2" slot="append" style="width: 70px">
                  <Option value="com">.com</Option>
                  <Option value="org">.org</Option>
                  <Option value="io">.io</Option>
              </Select> -->
            </Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="爱人姓名">
            <Input v-model="rowData.spouse_name" placeholder="爱人姓名"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="爱人手机">
            <Input v-model="rowData.spouse_phone" placeholder="爱人手机"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="爱人微信">
            <Input v-model="rowData.spouse_wx" placeholder="爱人微信"></Input>
          </FormItem>
        </Col>
        <Divider orientation="left" dashed size="small" style="font-size: 12px;margin-top: 0">其他信息</Divider>
        <Col span="6">
          <FormItem label="类型">
            <Select v-model="rowData.type_id" @on-change="typeChange" :label-in-value="true">
              <Option v-for="item in typeList" :value="item.type_id" :key="item.type_id">{{ item.type_name }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="渠道">
            <Input v-model="rowData.source_channel" disabled placeholder="渠道"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="意向度">
            <Select v-model="rowData.intention_level" placeholder="意向度">
              <Option value="A (3-6个月)">A (3-6个月)</Option>
              <Option value="B (一年内)">B (一年内)</Option>
              <Option value="C (两年内)">C (两年内)</Option>
              <Option value="D (潜在客户)">D (潜在客户)</Option>
              <Option value="E">E</Option>
              <Option value="F">F</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="预算">
            <Select v-model="rowData.budget" placeholder="预算">
              <Option value="2k以下">2k以下</Option>
              <Option value="2k-4k">2k-4k</Option>
              <Option value="4k-6k">4k-6k</Option>
              <Option value="6k-8k">6k-8k</Option>
              <Option value="8k-10k">8k-10k</Option>
              <Option value="10k以上">10k以上</Option>
              <Option value="其他">其他</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="省市区">
            <Cascader :value="kz_addr" :data="options4" @on-change="handleAreaChange" />
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="详细地址">
            <Input v-model="rowData.detailed_address" placeholder="详细地址"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="老客户">
            <Input v-model="rowData.existing_customer" placeholder="老客户"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="门店">
            <Select v-model="rowData.store_id" placeholder="门店">
              <Option v-for="item in storeList" :value="item.store_id" :key="item.store_id">{{ item.store_name }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="深挖员工">
            <Input v-model="rowData.recommended_employee" placeholder="深挖员工"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="是否到店">
            <Input v-model="rowData.go_store" placeholder="是否到店"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="预算范围">
            <Input v-model="rowData.budget_range" placeholder="预算范围"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="婚期时间">
            <Input v-model="rowData.wedding_time" placeholder="婚期时间"></Input>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="核销">
            <Select v-model="rowData.redeem" placeholder="核销">
              <Option value="美团核销">美团核销</Option>
              <Option value="婚礼纪核销">婚礼纪核销</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="补款金额">
            <Input v-model="rowData.top_up_amount" placeholder="补款金额"></Input>
          </FormItem>
        </Col>
        <Divider orientation="left" dashed size="small" style="font-size: 12px;margin-top: 0">时间信息</Divider>
        <Col span="6">
          <FormItem label="婚期" prop="wedding_date">
            <DatePicker clearable v-model="rowData.wedding_date" type="date" placeholder="婚期"></DatePicker>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="预拍时间" prop="planned_shooting_time">
            <DatePicker clearable v-model="rowData.planned_shooting_time" type="date" placeholder="预拍时间"></DatePicker>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="拍照时间" prop="planned_shooting_time">
            <DatePicker clearable v-model="rowData.planned_shooting_time" type="date" placeholder="拍照时间"></DatePicker>
          </FormItem>
        </Col>
        <Col span="6">
          <FormItem label="补款时间" prop="top_up_time">
            <DatePicker clearable v-model="rowData.top_up_time" type="date" placeholder="补款时间"></DatePicker>
          </FormItem>
        </Col>
        <Divider orientation="left" dashed size="small" style="font-size: 12px;margin-top: 0">备注信息</Divider>
        <Col span="24">
          <FormItem prop="kz_remarks" class="mf0">
            <Input v-model="rowData.kz_remarks" type="textarea" :rows="5" placeholder="客资备注"></Input>
          </FormItem>
        </Col>
        <Col span="24">
          <FormItem class="mf0" label="图片备注" style="display: flex;flex-direction: column;" prop="imgRemark">
            <el-upload
              action="11"
              :http-request="kzRemarksUpload"
              :limit="1"
              :file-list="attach_list"
              list-type="picture-card"
              compress="false"
              :on-exceed="handlePictureCardExceed"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              >
              <i class="el-icon-camera"></i>
            </el-upload>
          </FormItem>
        </Col>
      </Row>
      <div style="display: flex;justify-content: center; position: sticky; bottom: 0px; padding: 10px; background-color: rgba(255, 255, 255, 0.9);">
        <Button type="primary" icon="ios-checkmark-circle" @click="editBaoCun">编辑保存</Button>
      </div>
    </Form>
  </div>
</template>

<script>
  import {
    getAllstore,
    getAllType,
  } from "@/api/order/index";
  import {
    updateKz,
    upload_image
  } from "@/api/kz/index";
  // 引入城市数据
  import {
    provinceAndCityData,
    provinceAndCityDataPlus,
    regionData,
    regionDataPlus,
    CodeToText,
    TextToCode,
  } from "@/components/RegionPicker";
  export default {
    data() {
      return {
        options4: regionDataPlus,
        channelList: [],
        attach_list: [],
        subChannelList: [],
        subChannelProps: {
          value: "id",
          label: "name",
          children: "sub_channel",
        },
        typeList: [], // 类型列表
        storeList: [], // 门店列表
        kz_addr: [],
        rowDataFules: {},
        rowData: {}
      }
    },
    watch: {
      '$store.state.layout.app.rowData'(newValue, oldValue) {
        this.rowData = newValue
      }
    },
    created() {
      this.getStore()
      this.getTypes()
      this.rowData = this.$store.state.layout.app.rowData
      for (let key in this.rowData) {
        if (key == 'kz_addr') {
          this.kz_addr = this.rowData[key].split(',')
        }
      }
      // this.kz_addr = [this.rowData.kz_addr.slice(0,6),this.rowData.kz_addr.slice(7,13),this.rowData.kz_addr.slice(8)]
      // console.log(this.rowData.kz_addr.slice(0,6),this.rowData.kz_addr.slice(7,13),this.rowData.kz_addr.slice(8));
    },
    methods: {
      // 保存编辑内容
      editBaoCun() {
        console.log('rowData', this.rowData);
        updateKz(this.rowData).then(res => {
          console.log('保存编辑内容', res);
          if (res.rstpCode === '0000') {
            this.$Message.success('修改成功');
            this.$emit('queryALlKz')
          } else {
            this.$Message.error({
              message: res.rstpMsg,
              duration: 0,
              customClass: 'myMessageClass'
            });
          }
        })
      },
      // 得到所有的拍摄类型
      getTypes() {
        getAllType().then(res => {
          console.log('得到所有的拍摄类型', res);
          if (res.rstpCode === '0000') {
            this.typeList = res.data;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      // 获取所有店铺列表
      getStore() {
        getAllstore().then(res => {
          console.log('获取所有店铺列表', res);
          if (res.rstpCode === '0000') {
            this.storeList = res.data;
          } else {
            this.$Message.error(res.rstpMsg);
          }
        })
      },
      typeChange(val) {
        console.log(val);
        if (val) {
          this.rowData.type_id = val.value
          this.rowData.type_name = val.label
        }

      },
      // 选择门店事件
      storeChange(e) {
        this.rowData.store_name = this.storeList.find(item => item.store_id == e).store_name
      },// 选择状态事件
      handleAreaChange(value) {
        console.log("选择的code数据：", value);
        // console.log(typeof(Array.from(value).join(',')));
        this.rowData.kz_addr = value[0] + ',' + value[1] + ',' + value[2]
      },
      // 上传客资备注图片
      kzRemarksUpload(file) {
        console.log(file);
        const isLt2M = file.file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
        	this.loading = false;
        	this.$message.error("上传图片大小不能超过 2MB!");
        	return false;
        }
        const formData = new FormData();
        formData.append("image", file.file);
        upload_image(formData).then(res => {
          console.log('上传图片', res);
          if (res.rstpCode === '0000') {
            this.rowData.image_note = process.env.VUE_APP_BASE_SERVE + res.data[0].url
          }
        })
      },
      handlePictureCardExceed(files, fileList) {
         this.$Message.error('最多上传一张图片');
      },
      handlePictureCardPreview(file) {
        this.imgDialogVisible2 = true
      },
      handleRemove(file, fileList) {
        this.rowData.image_note = ''
      },
    },
  }
</script>

<style scoped lang="less">

</style>
